<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html> 
<!--[if lt IE 7 ]><html class="ie ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="initial-scale=1,minimum-scale=1" />
	<title>活动编辑-活动管理</title>
	<c:import url="${appRoot}/public/head-tag.jsp"/>
	<style type="text/css">
		.table-lottery td{
			padding:5px;
		}
		.textarea{
			width:100%;
			min-width:300px;
			min-height:150px;
			border:0;
		}
		.xiuxiu-upload-container ,div.xiuxiu-upload {
			width: 310px;
			height: 130px;
		}
		.text-datetime{
			width:134px;
		}
		.action-remove:hover {
		    text-decoration: none;
		    color: #ad1919;
		}
		.action-remove {
		    font-size: 18px;
		    color: #cacaca;
		    margin-right: 5px;
		}
		.input-unit {
			margin-left: -25px;
			color: rgb(128, 128, 128);
			z-index: -1;
		}
	</style>
</head>
<body>

    <c:import url="${appRoot}/public/header.jsp"/>
    
    <section class="container" id="app">
    
		<c:set var="sidebar" scope="request" value="content"/>
		<c:set var="navbar" scope="request" value="activity"/>
		<c:import url="${appRoot}/public/sidebar.jsp"/>
		
    	<div class="content">
    		<div class="content-top">
    			<h3 class="content-title">
    				<div class="bread">
    					<a href="/Manager/web/action/listPage">活动管理</a>
    					<span>&gt;</span>
    					
    					<template v-if="isEdit">
        					<span v-text="appTitle+'活动编辑'"></span>
    					</template>
    					
    					<template v-else>
        					<a href="/Manager/web/action/guide">活动发布</a>
        					<span>&gt;</span>
        					<span v-text="appTitle"></span>
    					</template>
    				</div>
    			</h3>
    		</div>
    		<div class="content-main">
    			<div class="block block-main">
    				<div class="block-content" >

						<form action="{{submitAction}}" method="post" goback="#">
							<div class="form-block">
								<div class="form-row">
									<span class="row-label">活动标题：</span>
									<div class="row-content">
										<input name="title" type="text" class="text"   ipattern="^.{2,40}$" iname="活动标题" v-model="form.title"/>
									</div>
								</div>
								
								<div class="form-row">
									<span class="row-label">活动时间：</span>
									<div class="row-content">									 	
										<input type="text" name="sdate" lazy  v-model="form.applyStartTime | formatDate" class="text text-datetime" datepicker="datetime" iname="活动起始时间" itip="请选择活动起始时间" placeholder="活动起始时间" />
										<span>~</span>
										<input type="text" name="edate" lazy  v-model="form.applyEndTime | formatDate"  class="text text-datetime" datepicker="datetime" iname="活动结束时间" itip="请选择活动结束时间" placeholder="活动结束时间" />
									</div>
								</div>
								
								<%--<div class="form-row">
									<span class="row-label">活动权重：</span>
									<div class="row-content">
										<input name="sort" type="text" placeholder="权重越高，排名越靠前" v-model="form.sort" class="text"   ipattern="^\d+(\.\d+)?$" iname="活动权重"/>
									</div>
								</div>--%>
								
								<div class="form-row">
									<span class="row-label">报名上限：</span>
									<div class="row-content">
										<input name="maxAppliment" type="text" class="text" v-model="form.maxAppliment" iname="报名上限" placeholder="没有上限请填写-1" />
										<p class="value-note color-red">如果没有报名上限，默认为-1</p>
									</div>
								</div>
								
								<div class="form-row">
									<span class="row-label">设置轮播：</span>
									<div class="row-content">
										<div class="row-value">
											<input type="checkbox" name="istop" id="category_2" value="1" v-model="form.loopStatus" :true-value="1"/>
											<label for="category_2">设置为轮播</label>
										</div>
									</div>
								</div>

								<div class="form-row">
									<span class="row-label">活动图片：</span>
									<div class="row-content">
										<div  xx-upload class="xiuxiu-upload-container">
											<textarea type="config" style="display:none;">{{getImageConfig(form.thumb) | json}}</textarea>
										</div>
										<p class="value-note">图片规格：750x360</p>
									</div>
								</div>

								<div class="form-row">
									<span class="row-label">报名项目：</span>
									<div class="row-content">
										<div class="row-value">
											<field-editor :list="form.itemList"></field-editor>
										</div>
									</div>
								</div>
								<div class="form-row">
									<span class="row-label">活动提示：</span>
									<div class="row-content">
										<input name="tips" type="text" class="text"  iname="活动提示" placeholder="活动提示"  v-model="form.tips"/>
									</div>
								</div>
								<div class="form-row">
									<span class="row-label">介绍：</span>
									<div class="row-content">
										<textarea name="intro" rteditor class="textarea" iname="活动介绍"   v-model="form.intro"></textarea>
									</div>
								</div>
								<div class="form-row">
									<span class="row-label">活动配置：</span>
									<div class="row-content">
										<p class="row-value">
											<input  
												type="checkbox" 
												name="isPay" 
												id="isPay2" 
												pay="toggle"
												v-model="form.payStatus"
												v:bind:true-value="form.payStatus===1"
												v:bind:false-value="form.payStatus!==1"
											 />
											<label for="isPay2">需支付费用</label>
										</p>
									</div>
								</div>

								<div class="form-row">
									<span class="row-label">费用名称：</span>
									<div class="row-content">
										<input name="payname" pay="true" type="text"  class="text"   ipattern="^.{2,20}$" iname="费用名称" v-bind:disabled="form.payStatus!=1" v-model="form.payName"/>
									</div>
								</div>
								
								<div class="form-row">
									<span class="row-label">费用金额：</span>
									<div class="row-content">
										<input name="pay"  pay="true"  type="text"  class="text" ipattern="^\d+(\.\d+)?$" iname="费用金额" v-bind:disabled="form.payStatus!=1"  v-model="form.payAmount"/>
										<span class="input-unit">元</span>
									</div>
								</div>

								<div class="form-row">
									<span class="row-label">收费方式：</span>
									<div class="row-content">
										<select  class="select" name="payType" iname="收费方式" ipattern="^\d$" v-bind:disabled="form.payStatus!=1"  v-model="form.payType">
											<option value="">-请选择-</option>
											<option value="2">按人收费</option>
											<option value="1">按车收费</option>
										</select>
									</div>
								</div>

								<div class="form-row">
									<span class="row-label">截止日期：</span>
									<div class="row-content">
										<input name="payEndTime"  pay="true"  datepicker="date" type="text"  class="text"  iname="截止日期"  v-bind:disabled="form.payStatus!=1"  v-model="form.payEndTime | formatDate 'YYYY-MM-DD'"/>
									</div>
								</div>
								
								<div class="form-row form-row-btn">
									<div class="row-content">
										<input type="hidden" name="type" :value="pageType">
										<input type="hidden" name="appId" :value="appId">
										<input type="hidden" v-if="isEdit" name="id" v-model="form.actionId">
										<button class="btn btn-default btn-large" v-text="form.actionId?'保存修改':'确认发布'">确认发布</button>
									</div>
								</div>
							</div>
						</form>
    				</div>
    			</div>

    		</div>
    	</div>
    </section>
    
    <script type="text/template" id="field/editor">
        <ul>
            <li v-for="item in list">
                <span class="item">
					<select v-model="item.type" class="select">
                     <option value="1">单行输入框</option>
                     <option value="2">多行输入框</option>
                     <option value="3">数量选择框</option>
                    </select>
                    <input type="text" class="text" v-model="item.title" lazy @keydown.enter.prevent="addField({isNeeded:1,type:1})"  placeholder="输入报名项目名称" iname="项目名称" ipattern="^.{1,60}$" v-bind:value="item.title"/>
                </span>
                <span>
                    <label><input type="checkbox"  v-model="item.isNeeded"  :true-value="1"  :false-value="0" />必填</label>
                </span>
                <span>
                    <input 
                        v-if="item.type==3"
                        type="text" 
                        class="text text-100" 
                        lazy 
                        v-model="item.maxnumber" 
                     placeholder="报名最大人数" iname="报名最大人数" ipattern="^\d{1,2}$" name="maxnumber"/>
                </span>
                    <a href="javascript:;" title="删除" @click="removeField(item.id)" class="action-link action-remove">&times;</a>
            </li>
            <input type="hidden" name="items" value="{{list | json 0}}"/>
            <template v-if="list.length<config.max">
                <li>
                    <a href="javascript:;" @click="addField({isNeeded:1,type:1})" class="action-link action-add">添加项目+</a>
                </li>
            </template>
        </ul>
	</script>
   
   <script src="/pages/assets/js/require.all.js"></script>
   <script>
        requirejs([
            'vue',  
            'artDialog',  
            'artTemplate', 
            'moment',
            
            'utils.search',
            'vender.modal', 
            'vender.types', 
            
            'vender.xxupload', 
            'vender.rteditor', 
            'vender.datetimepicker', 
            'vender.actions', 
             
            'jquery.formcheck', 
            'jquery.ajaxsubmit',
            'jquery.common'
        ],
        function(Vue, dialog, template, moment, Search,  Modal, Field, XXUpload, RichTextEditor, DateTimePicker, Action){
        	
        	var search = new Search().getParams();
            var isEdit = !!search.id;
            
            Action.extend({
                'form.detail' : '/Manager/web/action/detail?id={id}',
                
                'form.add' : '/Manager/web/action/addSave',
                'form.update' : '/Manager/web/action/updateSave',
                
                'list.activity':'/Manager/web/action/listSearch?status=1',
            })
            
            var PageType = Field.Plugins.SIGNUP;
            
   			var App={
   					
    			alert : function(){
    				//return Modal.alert.apply(this, arguments)
    				alert(arguments[0]);
    			},
    			
                getFormData :function(){
                    
                    var dtd = $.Deferred();
                    
                    var defaultData ={
                    	itemList:[],
						payType:''
                    }
                    
                    if(!isEdit){
                         return dtd.resolve(defaultData);
                    }
                    
                    var url = Action.get('form.detail', search);
                    $.getJSON(url, function(result){
                        var code = result.code;
                        if(code==200){
                            dtd.resolve(result.data)
                        }else{
                            var msg = result.msg || '数据获取失败！';
                            dtd.reject(msg)
                        }
                    })
                    .fail(function(e, type, msg){
                        dtd.reject(type + msg)
                    })
                    return dtd;
                },
    			
    			initForm:function(formData){
    			    
    				var fieldEditor = Vue.extend({
                        template:document.getElementById('field/editor').innerHTML,
                        props:['list'],
                        computed:{
                            'list':function(){
                                return this.getStore().list
                            },
                            'config':function(){
                                return this.getStore().config
                            }
                        },
                        data:function(){
                            return this.getInitData();
                        },
                        methods:{
                            getInitData:function(){
                                return {
                                    store:{
                                        config:{
                                           max:12
                                        },
                                        list:this.list
                                    }
                                }
                            },
                            getStore:function(){
                                return this.store;
                            },
                            getID:function(item){
                                return Math.random()*10;
                            },
                            addField:function(data){
                                var id=this.getID();
                                var d=data || {};
                                d.id=id;
                                this.getStore().list.push(d);
                                this.$nextTick(function () {
                                    $(this.$el).find('input:text:last').focus();
                                })
                            },
                            removeField:function(id){
                                this.getStore().list=this.getStore().list.filter(function(d){
                                    return d.id!=id;
                                })
                            }
                        }
                    })
    				
    				new Vue({
    					el:'#app',
    					components:{
    					  'field-editor':fieldEditor
    					},
    					computed:{
    						'form':function(){
    							return this.getStore().form;
    						},
    						'isEdit':function(){
    							return isEdit;
    						},
    						'submitAction' : function(){
    						    if(isEdit) return Action.get('form.update')
    						    return Action.get('form.add')
    						},
							'appId':function(){
								return search.appid;
							},
    						'pageType':function(){
    							return PageType;
    						},
    						'appTitle' : function(){
    						    return PageType.name
    						}
    					},
    					filters:{
    						formatDate :function(date, format){
    							if(!date) return;
    							format = format || 'YYYY-MM-DD HH:mm';
    							return moment(date).format(format)
    						}
    					},
    					methods:{
    						
    						getInitData :function(){
    							return {
    								store:{
    									form:formData
    								}
    							}
    						},
    						
    						getStore :function(){
    							return this.store;
    						},
    						
    						getImageConfig:function(value){
    							return {
									name:'thumb',
									checker:{
										iname:'活动图片',
										itip:'请上传活动图片'
									},
									value:value
								}
    						}
    					},
    					data:function(){
    						return this.getInitData()
    					}
    				})
    				
					$("form").ajaxSubmitify({
						beforeSubmit:function(){
							
							//检查图片是否已上传
							// TODO
						}
					})
    			},
    			
                initAll : function(){
                    
                    XXUpload('[xx-upload]',{size:'750:360'});
                    
                    DateTimePicker('[datepicker]');
                
                    RichTextEditor('[rteditor]');
                    
                },
    			
    			init:function(){
    				var app = this;
    				
    				//$('body').loading(true)
	   				
    				this.getFormData()
    				.then(function(data){
    					app.initForm(data);
    					setTimeout(function(){
    						
    					app.initAll();
    					}, 1000)
    				})
    				.fail(function(msg){
    					app.alert(msg)
    				})
    				.always(function(){
		   				//$('body').loading(false)
    				})
    			}
    		}
            
    		App.init();
    	
        })
   </script>
    </body>
</html>